@import '../../variables.less';
@import '../../common-functions.less';
@import '../../form/common-form-functions.less';

.goods-info {
    .gallery {
        float: left;
        width: 40%;
    }

    .info-main {
        float     : left;
        width     : 60%;
        text-align: left;

        h3 {
            font-weight: 500;
            font-size  : 2.4rem;
        }

        .price {
            color      : @mainColor;
            font-size  : 1.5rem;
            font-weight: bold;
        }

        button {
            .aj-btn-base();
        }

        li {
            border       : 1px solid lightgray;
            margin       : 15px 0;
            padding      : 0 8px 0 0;
            width        : fit-content;
            border-radius: 5px;
            cursor       : pointer;

            &.active {
                border-color: gray;
            }
        }
    }

    section {
        overflow: hidden;

        .gallery {
            float : left;
            width : 40%;
            height: 300px;

            a {
                height    : 300px;
                width     : 480px;
                text-align: center;

                img {
                    max-height: 100%;
                    width     : initial;
                }
            }
        }

        .info {
            float       : right;
            width       : 57%;
            padding-left: 3%;

            h3 {
                font-weight: 500;
                font-size  : 2.4rem;
            }

            .subTitle {
                font-size     : 1.1rem;
                color         : gray;
                letter-spacing: 3px;
                margin        : 2% 0;
            }

            .price {
                color      : @mainColor;
                font-size  : 1.5rem;
                font-weight: bold;

                span {
                    font-size: .9rem;
                    color    : gray;
                }
            }

            li {
                border       : 1px solid lightgray;
                margin       : 15px 0;
                padding      : 5px 8px;
                width        : fit-content;
                border-radius: 5px;
                cursor       : pointer;

                &.active {
                    border-color: gray;
                }
            }

            input[type=number] {
                padding           : 14px 10px;
                font-family       : poppins, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, helvetica neue, Arial, sans-serif;
                font-size         : 20px;
                font-weight       : 500;
                color             : #151515;
                text-align        : center;
                width             : 60px;
                height            : 40px;
                line-height       : 1.6;
                letter-spacing    : .025em;
                border            : 0;
                outline           : 0;
                border-radius     : 6px;
                -webkit-appearance: none;
                -moz-appearance   : textfield;
                background-color  : #f5f5f5;
                transition        : .3s ease-in-out;
                margin-right      : 10px;
            }

            .stepper {
                span {
                    display         : block;
                    float           : right;
                    width           : 32px;
                    height          : 32px;
                    font-size       : 24px;
                    font-weight     : 400;
                    font-family     : material design icons;
                    line-height     : 32px;
                    border-radius   : 6px;
                    background-color: #f5f5f5;
                    text-align      : center;
                    cursor          : pointer;
                    color           : gray;

                    &:hover {
                        color: black;
                    }
                }
            }

            button {
                .aj-btn-base();
            }
        }
    }

    .info-tab {
        margin: 2% 0;
        clear : both;

        li {
            list-style         : disc;
            list-style-position: inside;
        }

        p {
            text-indent: 2em;
            .aj-text-function();
        }
    }
}